<template>
	<view>
		<view v-if='order && order.afterSales' style='padding:20px'>
			<u-steps :current="order.afterSalesStatus" direction='column' activeColor='#19be6b'
				activeIcon='checkmark-circle' inactiveIcon="more-circle">
				<u-steps-item title="已下单" :desc="$u.timeFormat(new Date(order.createdTime), 'yyyy年mm月dd日 hh:MM')">
				</u-steps-item>
				<u-steps-item v-for='item in order.afterSales' :title="item.title + '  ' + item.comment"
					:desc="item.time">
				</u-steps-item>
			</u-steps>
			<view v-if='order.afterSalesStatus == 2'>
				<u-alert title="提示" type="warning" description="请按提供的地址寄回产品,并输入快递单号"></u-alert>
				<view style='margin:20px 0px'>
					<u--input placeholder="请输入快递单号" border="surround" v-model="shippingNo"></u--input>
					<view style='margin-top:10px'>
						<u-button text='确定已寄出' type='primary' @click='updateShippingNo' shape='circle'></u-button>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="container">
			<!-- 售后类型选择 -->
			<view class="section">
				<text class="section-title">售后类型</text>
				<u-radio-group v-model="afterSaleType" placement="row" @change="typeChange" class="radio-group">
					<u-radio name="退款退货" label="退款退货" labelSize="16" activeColor="#ff6a6c"></u-radio>
					<u-radio name="换货" label="换货" labelSize="16" activeColor="#ff6a6c"></u-radio>
				</u-radio-group>
			</view>

			<!-- 售后原因输入 -->
			<view class="section">
				<text class="section-title">售后原因</text>
				<u--textarea v-model="reason" placeholder="请输入售后原因（必填）" maxlength="200" height="120" count border="none"
					backgroundColor="#f8f8f8" padding="15"></u--textarea>
			</view>

			<!-- 提交按钮 -->
			<view class="btn-wrapper">
				<u-button text="提交申请" color="#ff6a6c" shape="circle" @click="submit" :disabled="!canSubmit"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				afterSaleType: '退款退货', // 1-退款退货 2-换货
				reason: '', // 售后原因
				id: 0,
				order: '',
				shippingNo: '',
				afterSales: [{
						title: '申请售后',
						time: '',
						comment: ''
					},
					{
						title: '客服审核',
						time: '',
						comment: ''
					},
					{
						title: '寄回产品',
						time: '',
						comment: ''
					},
					{
						title: '仓库验收',
						time: '',
						comment: ''
					},
					{
						title: '确定退款/换货',
						time: '',
						comment: ''
					}
				]
			}
		},
		computed: {
			// 检查是否可以提交
			canSubmit() {
				return this.reason.trim().length > 0
			}
		},
		onLoad(options) {
			if (typeof(options.id) != 'undefined') {
				this.request.get(`api/orders/${options.id}`).then((res) => {
					console.log(111, res.data)
					this.id = res.data.id
					this.order = res.data
				})
			}
		},
		methods: {
			// 输入寄回快递单号
			updateShippingNo() {
				if (this.shippingNo.trim() == '') {
					uni.showToast({
						title: '请输入快递单号',
						icon: 'none'
					})
				} else {
					uni.showLoading()
					let date = new Date()
					date =
						`${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
					this.order.afterSales[2].time = date
					this.order.afterSales[2].comment = `快递单号：${this.shippingNo}`
					this.request.put(`api/orders/${this.id}`, {
						afterSales: this.order.afterSales,
						afterSalesStatus: 3
					}).then((res) => {
						uni.hideLoading()
						uni.showModal({
							title: '',
							content: '操作成功，我们会及时留意物流情况...',
							showCancel: false,
							success: () => {
								this.order = res.data
							}
						})
					})
				}
			},
			// 售后类型变更
			typeChange(value) {
				this.afterSaleType = value
				console.log('选择的售后类型:', value)
			},

			// 提交申请
			submit() {
				if (!this.canSubmit) {
					uni.showToast({
						title: '请填写售后原因',
						icon: 'none'
					})
					return
				}
				let date = new Date()
				this.afterSales[0] = {
					title: '申请售后',
					time: `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${date.getMinutes()}`,
					comment: `${this.afterSaleType}:${this.reason.trim()}`
				}
				uni.showLoading({
					title: '提交中...'
				})
				this.request.put(`api/orders/${this.id}`, {
					afterSales: this.afterSales,
					afterSalesStatus: 1
				}).then((res) => {
					uni.hideLoading()
					uni.showModal({
						title: '',
						content: '申请成功，我们会及时处理...',
						showCancel: false,
						success: () => {
							// uni.redirectTo({
							// 	url: `/pages/mine/order-detail?id=${this.id}`
							// })
							this.order = res.data
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding: 20rpx;
	}


	.section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;

		&-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 30rpx;
		}
	}

	.radio-group {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.btn-wrapper {
		padding: 40rpx 30rpx;
	}
</style>